<template>
  <div class="addRecord">
    <u-form :model="form" ref="uForm" :error-type="errorType" label-width="220rpx" label-align="left">
      <u-form-item label="拍照上传">
        <p class="recordUp" @click="updateModel('lower')">上传</p>
      </u-form-item>
      <u-form-item prop="lower" label="血压/低压">
        <u-input v-model="form.lower"/>
      </u-form-item>
      <u-form-item prop="upper" label="血压/高压">
        <u-input v-model="form.upper"/>
      </u-form-item>
      <u-form-item prop="pulse" label="脉搏(每分/次)">
        <u-input v-model="form.pulse"/>
      </u-form-item>
      <u-form-item prop="sugar" label="血糖值">
        <u-input v-model="form.sugar"/>
        <p class="recordUp" @click="updateModel('sugar')">上传</p>
      </u-form-item>
      <u-form-item prop="account" label="用户" 
        ><u-input v-model="form.account"
      /></u-form-item>
      <u-form-item prop="description" label="备注"
        ><u-input type="textarea" v-model="form.description"
      /></u-form-item>
      <u-button type="success" @click="confimRecord">提交记录</u-button>
    </u-form>
    <u-modal class="model" @confirm="confirm" v-model="show" title="上传图片" :show-cancel-button="true">
      <view class="slot-content">
        <u-upload ref="upload" :max-count="1" :action="action" :multiple="false" @on-uploaded="uploaded" :file-list="fileList" ></u-upload>
      </view>
    </u-modal>
    <u-toast ref="uToast" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: false,
      action:"",
      errorType: ['toast'],
      fileList: [],
      form:{
        upper:"",
        lower:"",
        pulse:"",
        account:"",
        sugar:"",
        description:""
      },
      rules: {
        upper: [
          {
            required: true,
            message: "高压不能为空",
            trigger: "blur"
          }
        ],
        lower: [
          {
            required: true,
            message: "低压不能为空",
            trigger: "blur"
          }
        ],
        pulse: [
          {
            required: true,
            message: "脉搏不能为空",
            trigger: "blur"
          }
        ],
        sugar: [
          {
            required: true,
            message: "血糖值不能为空",
            trigger: "blur"
          }
        ],
        account: [
          {
            required: true,
            message: "用户不能为空",
            trigger: "blur"
          }
        ],
        description: [
          {
            required: true,
            message: "备注不能为空",
            trigger: "blur"
          }
        ]
      },
      photoUrl:"",
      updateType:""
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
  },
  created() {
    console.log(Date.parse(new Date()));
    let dateTime = Date.parse(new Date())
    this.action = "http://39.106.224.223:8088/ac/upload/"+dateTime
  },
  methods: {
    updateModel(type){
      this.show = true
      this.updateType = type
    },
    //把网络图片转换为base64
    convertImageToBase64(url){
      return new Promise((resolve, reject)=>{
        uni.request({
          url: this.photoUrl,
          method: 'GET',
          responseType: 'arraybuffer',
          success: async res => {
            resolve(res);
          },
          fail(err){
            reject(err);
          }
        });
      });
    },
    confirm(){
      this.$refs['upload'].clear()
      console.log(this.photoUrl);
      
      // this.photoUrl="https://m.360buyimg.com/n12/jfs/t2758/4/922771474/122602/47a4cc8a/57297447Nf5a4941a.jpg%21q70.jpg";
      if (this.photoUrl) {
        
        this.convertImageToBase64(this.photoUrl).then(res=>{
          let base64 = wx.arrayBufferToBase64(res.data); //把arraybuffer转成base64
          uni.request({
            url: "http://39.106.63.80:8888/",
            method: "POST",
            data: {image:base64},
            success: res => {
              console.log("识别结果：",res);
              this.$refs.uToast.show({
                title: "识别成功",
                type: "success"
              });
              switch (this.updateType) {
                case 'lower':
                  let arr=res.data.result.split(";")
                  console.log(arr);
                  this.form.lower = arr[0]
                  this.form.upper = arr[1]
                  this.form.pulse = arr[2]
                  break;
                case 'sugar':
                  this.form.sugar = res.data.result
                  break;
                default:
                  break;
              }
            }
          });
        });
      }else{
        this.$refs.uToast.show({
          title: "请上传图片",
          type: "error"
        });
      }
      
    },
    uploaded(list,name){
      // this.fileList = []
     this.photoUrl = "http://39.106.224.223:8088"+list[0].response.data
    },
    confimRecord(){
      this.$refs['uForm'].validate(valid => {
        console.log(valid);
        if (valid) {
          let that = this;
          let token = this.$store.state.token
          uni.request({
            url: "http://39.106.224.223:8088/ac/record/post",
            header: {
              'content-type':'application/json',
              'Authorization':token
            },
            method: "POST",
            data: that.form,
            success: res => {
              if (res.data.code == 200) {
                this.$refs.uToast.show({
                  title: "提交成功",
                  type: "success"
                });
                uni.reLaunch({
                   url: './index'
                });
              } else {
                this.$refs.uToast.show({
                  title: "提交失败",
                  type: "error"
                });
              }
            },
            fail(er) {
              console.log(er);
            }
          });
        }
      })
    }
  },
}
</script>
<style lang="scss">
  .addRecord{
    .recordUp{
      color: #2d8cf0;
      position: absolute;
      right: 15px;
      top: 10px;
      z-index: 99;
    }
    .title_record{
      width: 100%;
      display: flex;
      padding: 20rpx;
      justify-content: space-between;
      box-sizing: border-box;
      background: #f3f3f3;
      p:last-child{
        color: #2d8cf0;
      }
    }
    .u-form-item--left__content__label{
      padding-left: 16rpx;
    }
    .slot-content{
      padding-left: 30rpx;
    }
  }
</style>